<template>
  <div>
    <el-form
      label-position="left"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      v-for="(item, index) in formItems"
      :key="index"
    >
      <el-form-item :label="item.label" :prop="item.prop">
        <!-- 输入框 -->
        <!-- 根据父组件传过来的disabled来判断当前组件是都可以编辑 -->
        <!-- 只隐藏需要隐藏的组件,不需要隐藏的则不隐藏 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="item.value"
          :ref="`formItem-${index}`"
          :placeholder="item.placeholder"
          :disabled="item.disabled"
        ></el-input>
        <!-- :disabled="getDisabled(item)" -->
        <!-- 数字输入框 -->
        <el-input-number
          v-else-if="item.type === 'inputNumber'"
          :ref="`formItem-${index}`"
          v-model="item.value"
          :min="1"
          :max="100000"
          :placeholder="item.placeholder"
          @change="handleChangeNumber"
        />
        <!-- 下拉框 -->
        <el-select
          v-else-if="item.type === 'select'"
          v-model="item.value"
          :ref="`formItem-${index}`"
          :placeholder="item.placeholder"
        >
          <el-option
            v-for="(option, optionIndex) in item.options"
            :key="optionIndex"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
        <!-- 输入框 -->
        <el-upload
          v-else-if="item.type === 'upload'"
          v-model:file-list="item.fileList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-input
          v-else-if="item.type === 'textarea'"
          type="textarea"
          v-model="item.value"
          :ref="`formItem-${index}`"
          :placeholder="item.placeholder"
        ></el-input>
        <!-- 按钮 -->
        <div v-else-if="item.type === 'button'" class="submit-btn">
          <el-button
            :size="item.cancelBtn.size"
            :type="item.cancelBtn.type"
            class="button-common--white"
            @click="cancelBtnEvent"
            >{{ item.cancelBtn.text }}</el-button
          >
          <el-button
            :size="item.submitBtn.size"
            :type="item.submitBtn.type"
            class="button-common-default"
            @click="submitFormApply"
          >
            {{ item.submitBtn.text }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <!-- 提交按钮 -->

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Plus } from "@element-plus/icons-vue";

const props = defineProps({
  formData: {
    default: [],
    type: Array,
  },
});
const { formData } = toRefs(props);

const router = useRouter();
const route = useRoute();
onMounted(() => {
  initData();
});

const emit = defineEmits(["siteSubmitEvent", "cancelEvent"]);
//默认数据
const formItems = ref([]);
//獲取路由数据
const initData = () => {
  // formItems.value = JSON.parse(route.query.showComponentType);
  formItems.value = formData.value;
  console.log(formData.value);
};

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};

const handleChangeNumber = (value) => {
  //将value值赋值给formItems里面的value
  formItems.value.forEach((item) => {
    if (item.prop === "people") {
      item.value = value;
    }
  });
};

//提交申请 将表单数据里面填写的或者是下拉选择的value值一对一的放到一个对象里面传给后端
const submitFormApply = () => {
  const form = {};
  formItems.value.forEach((item) => {
    // 将数组里面prop的值取出来作为key,value取出来作为value,并且一一对应的放到form对象里面
    if (item.type !== "button") {
      form[item.prop] = item.value;
    }
  });
  console.log(form);
  console.log(formItems.value);
  emit("siteSubmitEvent", form);
};
const cancelBtnEvent = () => {
  emit("cancelEvent");
};

// 找到父组件中里面disabled为true的组件,其他组件不隐藏
// const getDisabled = (item) => {
//   return item.disabled;
// };
</script>
<style lang="scss" scoped>
.submit-btn {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
</style>
